import { DomUtils } from '../utils/DomUtils';

/**
 * 思否(https://segmentfault.com)页面美化
 */
export class SegmentFault {

    static hostname = 'segmentfault.com';

    /**
     * @param {string} pathname 
     */
    main(pathname) {
        if (pathname.startsWith('/q')) {
            this.handleQuestion();
        } else if (pathname.startsWith('/a')) {
            this.handleBlog();
        }
    }

    /**
     * 思否问答页面
     */
    handleQuestion() {
        DomUtils.hide([
            // 顶部header
            'header',
            // 左侧导航栏
            document.querySelectorAll('.sidebar-wrap')[1],
            // 右侧侧边栏
            document.querySelector('#questionMain').nextElementSibling,
            // 问题和回答底部的有用、关注、收藏、分享按钮
            ...(document.querySelectorAll('.functional-area-bottom')),
            // 回答区域
            '#answer-question',
            // "推荐问题" 区域
            document.querySelectorAll('#questionMain > .mt-4.card:last-child')[0],
            'footer',
            '#OA_holder_3'
        ], 'scale');
        // 设置主题区域样式
        DomUtils.setCss('#__next', { width: '900px', margin: '0 auto', marginBottom: '20px' });
        DomUtils.setCss(document.querySelectorAll('.sidebar-wrap')[1], { 
            width: 0, border: 'none', padding: 0, margin: 0 });
        DomUtils.setCss('#question-wrap', { padding: 0 });
        document.querySelector('#question-wrap').classList.remove('mb-5');

        DomUtils.setBackground();
    }

    /**
     * 思否博客页面
     */
    handleBlog() {
        DomUtils.hide([
            // 顶部header
            'header',
            // 文章底部的赞赏、收藏按钮
            '.functional-area-bottom',
            // 应用和评论区域
            '.blog-comment-wrap',
        ]);
        // 以下是无法使用 display: none 隐藏的元素
        DomUtils.hide([
            // 左侧侧边栏，包含点赞、收藏、评论、分享按钮
            '.d-none.d-lg-flex.justify-content-end.align-items-start.col-lg-2',
            // 顶部中部横幅广告位
            document.querySelector('#OA_holder_2').parentElement,
            // 文章底部的作者信息
            '.pt-4.d-flex.flex-column.flex-md-row',
            // 文章底部的上一篇、下一篇导航
            document.querySelectorAll('.d-flex.justify-content-between')[2],
            // 文章底部的两个分割线
            ...(document.querySelectorAll('hr.bg-black.bg-opacity-50')),
            // 页面页脚
            'footer'
        ], 'scale');
        // 设置文章底部的 阅读和发布时间 样式
        DomUtils.setCss('.text-secondary.font-size-14.mb-4.d-flex.flex-wrap.justify-content-between', {
            marginTop: '20px'
        });
        // 文章左右居中
        DomUtils.setCss(document.querySelectorAll('.bg-white.py-5')[0], {
            width: '900px',
            margin: '20px auto',
            borderRadius: '10px',
            padding: '0 30px'
        });
        const article = document.querySelector('.article-wrap');
        article.querySelectorAll('.mx-auto.col-lg-7').forEach(item => item.classList.remove('col-lg-7'));
        // 文档目录，懒得处理了，直接隐藏了
        DomUtils.hide(article.querySelector('.d-none.d-lg-block.col-lg-2'), 'scale');

        DomUtils.setBackground();
    }
}